import React from 'react';
import { Card, Skeleton, Typography, Space, Tag } from 'antd';
import { 
  FireOutlined, 
  EyeOutlined, 
  LikeOutlined, 
  CommentOutlined,
  ShareAltOutlined 
} from '@ant-design/icons';

const { Title, Text, Paragraph } = Typography;

interface HotItemCardProps {
  loading?: boolean;
  rank?: number;
  title?: string;
  description?: string;
  url?: string;
  hotValue?: string | number;
  image?: string;
  platform?: string;
  timestamp?: string;
  stats?: {
    views?: number;
    likes?: number;
    comments?: number;
    shares?: number;
  };
  onClick?: () => void;
  onShare?: () => void;
}

const HotItemCard: React.FC<HotItemCardProps> = ({
  loading = false,
  rank,
  title,
  description,
  url,
  hotValue,
  image,
  platform,
  timestamp,
  stats,
  onClick,
  onShare
}) => {
  if (loading) {
    return (
      <Card>
        <Skeleton loading={true} avatar active>
          <Card.Meta
            title="Loading title"
            description="Loading description"
          />
        </Skeleton>
      </Card>
    );
  }

  const getRankStyle = (rank?: number) => {
    if (!rank) return {};
    
    if (rank <= 3) {
      return {
        backgroundColor: '#ff4d4f',
        color: 'white',
        fontWeight: 'bold'
      };
    } else if (rank <= 10) {
      return {
        backgroundColor: '#1890ff',
        color: 'white',
        fontWeight: 'bold'
      };
    } else {
      return {
        backgroundColor: '#f0f0f0',
        color: '#666',
        fontWeight: 'normal'
      };
    }
  };

  return (
    <Card
      hoverable
      onClick={onClick}
      style={{ 
        marginBottom: 16,
        borderRadius: 8,
        overflow: 'hidden'
      }}
      bodyStyle={{ padding: '16px' }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        {/* 排名 */}
        {rank && (
          <div 
            style={{
              minWidth: 32,
              height: 32,
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 14,
              ...getRankStyle(rank)
            }}
          >
            {rank}
          </div>
        )}

        {/* 内容区域 */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            <Title 
              level={5} 
              style={{ 
                margin: 0, 
                marginRight: 8,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                flex: 1
              }}
            >
              <a 
                href={url} 
                target="_blank" 
                rel="noopener noreferrer"
                style={{ color: 'inherit' }}
                onClick={(e) => e.stopPropagation()}
              >
                {title}
              </a>
            </Title>
            
            {hotValue && (
              <Tag 
                color="volcano" 
                icon={<FireOutlined />}
                style={{ marginLeft: 'auto' }}
              >
                {typeof hotValue === 'number' ? hotValue.toLocaleString() : hotValue}
              </Tag>
            )}
          </div>

          {description && (
            <Paragraph 
              style={{ 
                margin: '8px 0',
                color: '#666',
                fontSize: 13
              }}
              ellipsis={{ rows: 2 }}
            >
              {description}
            </Paragraph>
          )}

          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            marginTop: 8
          }}>
            <Space size="small">
              {platform && (
                <Tag color="blue">
                  {platform}
                </Tag>
              )}
              {timestamp && (
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {new Date(timestamp).toLocaleString()}
                </Text>
              )}
            </Space>

            {stats && (
              <Space size="middle">
                {stats.views && (
                  <Space size={4}>
                    <EyeOutlined style={{ color: '#666', fontSize: 12 }} />
                    <Text type="secondary" style={{ fontSize: 12 }}>
                      {stats.views.toLocaleString()}
                    </Text>
                  </Space>
                )}
                {stats.likes && (
                  <Space size={4}>
                    <LikeOutlined style={{ color: '#666', fontSize: 12 }} />
                    <Text type="secondary" style={{ fontSize: 12 }}>
                      {stats.likes.toLocaleString()}
                    </Text>
                  </Space>
                )}
                {stats.comments && (
                  <Space size={4}>
                    <CommentOutlined style={{ color: '#666', fontSize: 12 }} />
                    <Text type="secondary" style={{ fontSize: 12 }}>
                      {stats.comments.toLocaleString()}
                    </Text>
                  </Space>
                )}
                {onShare && (
                  <ShareAltOutlined 
                    style={{ color: '#666', fontSize: 12, cursor: 'pointer' }}
                    onClick={(e) => {
                      e.stopPropagation();
                      onShare();
                    }}
                  />
                )}
              </Space>
            )}
          </div>
        </div>

        {/* 图片 */}
        {image && (
          <img 
            src={image} 
            alt={title}
            style={{ 
              width: 80, 
              height: 80, 
              objectFit: 'cover',
              borderRadius: 8,
              flexShrink: 0
            }}
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none';
            }}
          />
        )}
      </div>
    </Card>
  );
};

export default HotItemCard;